<template>
  <!--搜索-->
  <div class="homeSearch" style="display: flex;align-items: center;flex-direction: column">
    <div>
      <p style="color: white;font-size: 20px;font-weight: bold;">
        CanASM: A comprehensive database for genome-wide allele-specific DNA methylation identification and annotation in cancer
      </p>
    </div>
    <div style="width: 1000px;">
      <el-input
          v-model="searchInput"
          style="max-width: 1000px;height: 50px"
          placeholder=" Please input one SNV/Genomic region/Gene"
          class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="Select" style="width: 150px;height: 50px">
            <el-option v-for="item in option" :label="item.label" :value="item.value" />
          </el-select>
        </template>
        <template #append>
          <el-button
              @click="searchSnvCpgList(select)"
              style="color: #ffffff;background-color: dodgerblue;height: 50px">Search</el-button>
        </template>
      </el-input>
      <p style="font-size: 15px;color: white">
        e.g., <el-button link style="color: #ffffff" @click="inputearch('rs1883832','snv')">rs1883832;</el-button> <el-button link style="color: #ffffff" @click="inputearch('chr20:4611000-46122145','genonmic_region')">chr20:4611000-46122145;</el-button> <el-button link style="color: #ffffff" @click="inputearch('CD40','gene')">CD40.</el-button>

      </p>
      <p style="font-size: 15px;color: #c4c3c3">
        <span style="text-align: left;vertical-align:text-top;">*</span>
        Note: the version of reference genome in this database is hg38.</p>
    </div>
  </div>
  <!--Introduction-->
  <div>

    <el-row style="">
      <el-col :span="12">
<!--        box-shadow: 2px 2px 2px #c4c3c3;-->
        <div style="background-color: #ffffff;margin: 5px 0;height: 40px;align-items: center;display: flex;align-content: center">
          <div style="font-size: 20px;font-weight: bold;margin: 5px">Introduction</div>
        </div>
        <p style="text-align: justify;font-size:18px;line-height: 32px;padding: 0 18px 0 18px;margin-bottom: 0">
          Allele-specific DNA methylation (ASM) provides critical insights into the complex genetic and epigenetic mechanisms regulating gene transcription. CanASM is the first comprehensive database dedicated to identifying and annotating ASM in cancer. CanASM catalogs ASM sites identified from bisulfite sequencing data across 31 cancer types and matched normal tissue samples. The current version of CanASM documents 5,003,877 SNV–CpG pairs, comprising 3,056,776 single-nucleotide variants (SNVs), of which 2,634,406 are SNPs, and 4,157,508 CpGs. Importantly, CanASM also provides extensive regulatory annotations for ASMs, including associated genes, cis-regulatory element and transcription factor (TF) binding colocalizations, TF affinity changes, etc. With an intuitive interface for browsing, querying, analyzing, and downloading, CanASM serves as a valuable resource for researchers investigating cancer-associated genetic variations and epigenetic regulation.
        </p>
      </el-col>
      <el-col :span="12" style="background-color: whitesmoke">
        <el-carousel height="470px">
          <el-carousel-item style="display: inline-flex;justify-content: center">
            <el-button  link><img src="../assets/home/1.png" height="470" width="710"/></el-button>
          </el-carousel-item>
          <el-carousel-item style="display: inline-flex;justify-content: center">
            <el-button link><img src="../assets/home/2.png" height="470" width="710"/></el-button>
          </el-carousel-item>
          <el-carousel-item style="display: inline-flex;justify-content: center">
            <el-button  link><img src="../assets/home/3.png" height="470" width="710"/></el-button>
          </el-carousel-item>
          <el-carousel-item style="display: inline-flex;justify-content: center">
            <el-button link><img src="../assets/home/4.png" height="470" width="710"/></el-button>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </div>
  <!--plot-->
  <div style="margin-top: 5px">
    <el-row>
      <el-col :span="24">
        <el-card class="card" style="border-bottom: none" shadow="never">
          <p class="card-p">Health status</p>
          <!--          <Theta :id="'Cancer-types'"-->
          <!--                 :dataType="require('@/assets/data/Cancer_type.json')" :width="400" :height="400"></Theta>-->
          <div style="display: inline-flex;justify-content: center">
            <chart4></chart4>
          </div>

        </el-card>
      </el-col>

    </el-row>
    <el-row>
      <el-col :span="16">
        <el-card class="card" style="border-top: none;border-right: none" shadow="never">
          <p class="card-p">Sample counts</p>
          <chart></chart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="card" style="border-top: none;border-left: none;border-bottom: none" shadow="never">
          <p class="card-p">Recent publications</p>
          <div style="height: 405px;width: 400px">
            <div style="display: flex;align-items: baseline">
              <el-icon style="margin-right: 5px"><Collection /></el-icon>
              <p style="text-align: justify;margin-bottom: 5px">
                <b>
                  <a class="toReadPage" target="_blank" href="https://doi.org/10.1093/bib/bbad469" style="color: black;text-decoration: none;">
                    GTAD: a graph-based approach for cell spatial composition inference from integrated scRNA-seq and ST-seq data.
                  </a>
                </b>
                <br>
                Tianjiao Zhang, Ziheng Zhang, Liangyu Li, Benzhi Dong, Guohua Wang, Dandan Zhang.
              </p>
            </div>
            <div style="display: flex;align-items: baseline">
              <el-icon style="margin-right: 5px"><Collection /></el-icon>
              <p style="text-align: justify;margin-bottom: 5px">
              <b>
                <a class="toReadPage" target="_blank" href="https://doi.org/10.3390/biom14040436" style="color: black;text-decoration: none;">
                  GTADC: A Graph-Based Method for Inferring Cell Spatial Distribution in Cancer Tissues.
                </a>
              </b>
              <br>
              Tianjiao Zhang, Ziheng Zhang, Liangyu Li, Jixiang Ren, Zhenao Wu, Bo Gao, Guohua Wang*.
            </p>
            </div>
            <div style="display: flex;align-items: baseline">
              <el-icon style="margin-right: 5px"><Collection /></el-icon>
              <p style="text-align: justify;margin-bottom: 5px">
              <b>
                <a class="toReadPage" target="_blank" href="https://doi.org/10.1016/j.ymeth.2024.01.018" style="color: black;text-decoration: none;">
                  GSL-DTI: Graph structure learning network for Drug-Target interaction prediction.
                </a>
              </b>
              <br>
              Zixuan E, Guanyu Qiao, Guohua Wang*, Yang Li*.
            </p>
            </div>
            <div style="display: flex;align-items: baseline">
              <el-icon style="margin-right: 5px"><Collection /></el-icon>
              <p style="text-align: justify;margin-bottom: 5px">
              <b>
                <a class="toReadPage" target="_blank" href="https://doi.org/10.1093/bib/bbae036" style="color: black;text-decoration: none;">
                  VirGrapher: a graph-based viral identifier for long sequences from metagenomes.
                </a>
              </b>
              <br>
              Yan Miao, Zhenyuan Sun, Chenjing Ma, Chen Lin, Guohua Wang, Chunxue Yang.
            </p>
            </div>
            <div style="display: flex;justify-content: end">
              <a class="toReadPage" target="_blank"  href="https://bioinfor.nefu.edu.cn/publications.html" style="color: black;text-decoration: none;"><b>more</b></a>
            </div>
          </div>
        </el-card>
        <el-card class="card" style="border-top: none;border-left: none" shadow="never">
        <p class="card-p">Visiters</p>
        <div style="width:400px;height:400px;display: inline-flex;justify-content: center;align-items: center">
          <div style="width:300px;height:300px;">
            <div id="clstr_globe" v-is="'script'" src="//clustrmaps.com/globe.js?d=klhU8YDansNXCkhkFALO65NZgMgMj1aDSonEKJ-1Deo" async="async"></div>
          </div>
        </div>

      </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import { ref,watch } from 'vue'
import {Theta,Donut,Bar,Echart_Tree} from '@/components/chart/index'
import chart from "@/components/chart/chart.vue"
import api from "@/api/api";
import {useRouter} from "vue-router";
import chart4 from "@/components/chart/chart4.vue"
import RelationChart from "@/components/chart/relationChart";

export default {
  name: "home_page",
  components:{
    RelationChart,
    Theta,Donut,Bar,Echart_Tree,chart,chart4
  },
  setup(){
    const router = useRouter()
    const data = reactive({
      searchInput: ref(''),
      select: ref('snv'),
      option: [
        {label: 'SNV',value: 'snv'},
        // {label: 'Single genomic locus',value: 'single'},
        {label: 'Genonmic region',value: 'genonmic_region'},
        {label: 'Associated gene',value: 'gene'},
      ],
    })

    // console.log(data)
    const searchSnvCpgList = (searchOption) => {
      if (searchOption === 'snv'){
        toSearch(data.searchInput,'snv')
      }else if (searchOption === 'single'){
        toSearch(data.searchInput,'single')
      }else if (searchOption === 'genonmic_region'){
        toSearch(data.searchInput,'genonmic_region')
      }else if (searchOption === 'gene'){
        toSearch(data.searchInput,'gene')
      }
    }

    const toSearch = (search,searchType) => {
      router.push({
        path:"/search",
        query:{
          search: search,
          searchType: searchType
        }
      })
    }
    const inputearch = (search,searchType) => {
      data.select = searchType
      data.searchInput = search
    }
    const toBrowse = () => {
      router.push({
        path:"/browse"
      })
    }
    const getColumn = (tableAllData) => {
      let tableClass = Object.keys(tableAllData[0])
      let column = []
      for (let i=0;i<tableClass.length;i++){
        let tableColumn = {name: tableClass[i],value: tableClass[i],href: tableClass[i]==='asmid'}
        column.push(tableColumn)
      }
      return JSON.stringify(column)
    }

    watch(()=>data.searchInput,(newValue,oldValue)=>{
      data.searchInput = newValue
      console.log(newValue)
    })
    return {
      ...toRefs(data),searchSnvCpgList,toSearch,toBrowse,inputearch
    }
  }
}
</script>

<style scoped>

::v-deep .el-select__wrapper {
  height: 50px;
}
.card{
  display: flex;
  align-items: center;
  flex-direction: column
}
::v-deep .card-p{
  text-align: center;
  position: relative;
  z-index: 20;
  font-size: 20px;
}
.homeSearch{
  background-image: url("../assets/home/homeSearch2.png");
}
.toReadPage:hover{
  text-decoration: underline;
}
</style>
